$(function () {
  // 铺设页面
  function loadLinksInfo() {
    $.ajax({
      url: 'http://nq2dbary.dongtaiyuming.net/admin/links',
      type: 'GET',
      headers: {
        Authorization: sessionStorage.getItem("token")
      },
      success: function (res) {
        // console.log(res);
        var tags = template("table-tpl", res)
        $('.layui-table tbody').html(tags)
        // console.log(tags);
      }
    })
  }
  // 运行铺设页面
  loadLinksInfo();

  //删除友情链接
  $(".layui-table tbody").on('click', '.delete', function (e) {
    var id = $(this).attr('data-id')
    layer.confirm("您确定要删除吗?", function (index) {
      // btn: ['确定删除', '取消']
      $.ajax({
        url: "http://nq2dbary.dongtaiyuming.net/admin/links/" + id,
        type: "DELETE",
        headers: {
          Authorization: sessionStorage.getItem("token")
        },
        success: function (res) {
          if (res.status == 0) {
            //删除成功了才执行
            layer.close(index)
            loadLinksInfo();
          }
        }
      })
    })
  })

  //添加友情链接
  $('.layui-card-header').on('click', function () {
    index = layer.open({
      type: 1,
      title: '添加友情链接',
      content: $('#add-form-tpl').html(),
      area: ['500px', '350px']
    })
    //点击button添加文件上传事件
    $('#urlIcon').on("click", () => {
      $('#linkFile').click();
    })
    //文件上传后缩略图
    $('#linkFile').on('change', function (e) {
      var file = e.target.files || e.dataTransfer.files;
      console.log(file);
      if (file) {
        const objectURL = URL.createObjectURL(this.files[0])
        $('#preIcon').attr('src', objectURL)
      }
    })
    //提交事件
    $('#add-form').on('submit', function (e) {
      e.preventDefault()
      var fd = new FormData(this)
      console.log(fd.has('linkicon'));

      $.ajax({
        url: "http://nq2dbary.dongtaiyuming.net/admin/links",
        type: "POST",
        data: fd,
        headers: {
          Authorization: sessionStorage.getItem("token")
        },
        processData: false,
        contentType: false,
        success: function (res) {
          console.log(res);
          if (res.status === 0) {
            layer.close(index);
            loadLinksInfo();
          }
        }
      })

    })
  })

  //编辑友情链接
  $('.layui-table tbody').on('click', '.edit', function () {
    //需要编辑的那条的id
    var id = $(this).attr('data-id')
    // 弹出层
    index = layer.open({
      type: 1,
      title: '编辑友情链接',
      content: $('#add-form-tpl').html(),
      area: ['500px', '350px']
    })
    $('#urlIcon').on('click', function () {
      $('#linkFile').click();
    })
    //显示缩略图
    $('#linkFile').on('change', function (e) {
      var file = e.target.files || e.dataTransfer.files;
      if (file) {
        const objectURL = URL.createObjectURL(this.files[0])
        $('#preIcon').attr('src', objectURL)
      }
    })

    //根据id获取友情链接详情
    $.ajax({
      url: "http://nq2dbary.dongtaiyuming.net/admin/links/" + id,
      type: 'GET',
      headers: {
        Authorization: sessionStorage.getItem("token")
      },
      success: function (res) {
        $('input[name=linkname]').val(res.data.linkname)
        $('input[name=linkurl]').val(res.data.linkurl)
        $('input[name=linkdesc]').val(res.data.linkdesc)
        $('#preIcon').attr('src', 'http://nq2dbary.dongtaiyuming.net/uploads/' + res.data.linkicon)
        console.log(res.data.linkicon);
      }
    })

    //提交表单数据修改页面
    $('#add-form').on('submit', function (e) {
      e.preventDefault();
      //直接将表单中的元素全都放入实例对象
      var fd = new FormData(this)
      $.ajax({
        url: "http://nq2dbary.dongtaiyuming.net/admin/links/" + id,
        type: 'PUT',
        headers: {
          Authorization: sessionStorage.getItem("token")
        },
        processData: false,
        contentType: false,
        data: fd,
        success: function (res) {
          if (res.status === 0) {
            layer.close(index);
            loadLinksInfo();
          }
        }


      })
    })
  })
})